<template>
  <div class="EleStatistics">
    <div class="topbox">
      <el-form ref="form" :model="form" label-position="left" label-width="60px">
          <el-row :gutter="20">
              <el-col :span="5">
                <el-form-item label="建筑群">
                  <FilterSelect2
                      v-model="form.buildingId"
                      :optionlist="qiyelist"
                      @updateModelValue="changeqiye"
                      :valuekey="{ name: 'name', value: 'id' }"
                    ></FilterSelect2>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="用户">
                  <FilterSelect2
                    v-model="form.customerId"
                    :optionlist="yonghulist"
                    :valuekey="{ name: 'customerName', value: 'id' }"
                  ></FilterSelect2>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="日期">
                  <el-date-picker
                    v-model="value1"
                    style="width: 100%;"
                    type="daterange"
                    size="small"
                    value-format="yyyy-MM-dd"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8" style="margin-top: 4px;text-align: right;">
                <el-button  size="small" @click="chongzhi">重 置</el-button>
                <el-button type="primary" size="small" @click="getdatalist">查 询</el-button>
              </el-col>
          </el-row>
      </el-form>
    </div>
    <div class="bodybox">
      <Newtitle @command="command" @daochu="daochu" @shuaxin="getdatalist">
        <template #leftother>
          <div>用电量总计: {{ totalobj.totalValue }} kWh</div>
        </template>
      </Newtitle>
      <div class="table">
        <TableColumn 
          :issize="iissize"
          ref="tabledata" 
          :tableData="tableData" 
          :tableConfig="tableConfig">
          <el-table-column
            label="操作">
            <template #default="{row}">
              <div><el-button type="text" @click="tolook(row)">详细</el-button></div>
            </template>
          </el-table-column>
        </TableColumn>
      </div>
      <div class="fenye">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page.sync="pageNo"
          :page-size="20"
          @current-change="getdatalist"
          :total="+totalCount">
        </el-pagination>
      </div>
      <ListDialog ref="ListDialogref"></ListDialog>
    </div>
  </div>
</template>
<script>
import dayjs from 'dayjs'
import ListDialog from './ListDialog.vue'
import {getstatisticsapi} from '@/api/prwpaid/report-forms/detail'
import {exportexcel} from '@/utils/excel'
import TableColumn from '@/components/Table'
import Newtitle from '@/components/TopTitle/newtitle.vue'
import {gettablelistapi} from '@/api/prwpaid/user-manage/OpenAaccount'
import { getloginlistapi } from '@/api/prwpaid/file-management/Architectural-complex'
export default {
  name: 'CallPoliceEleStatisticsIndex',
  components: {
    Newtitle,
    ListDialog,
    TableColumn
  },
  data() {
    return {
      pageNo:1,
      form: {
        customerId:''
      },
      totalobj:{},
      value1: [dayjs().format('YYYY-MM')+'-'+'01',dayjs().format('YYYY-MM-DD')],
      qiyelist: [],
      tableData: [],
      yonghulist: [],
      yomgnenglist: [],
      iissize: 'medium',
      tableConfig: [
        { label: '序号', type: 'index', center: 'center', width: '70' },
        { label: '建筑群', prop: 'buildingName',width:'200' },
        { label: '用户', prop: 'customerName' },
        { label: '用户编号', prop: 'customerCode', center: 'right' },
        { label: '日期', prop: 'date' ,center:'center'},
        { label: '总电量(kWh)', prop: 'totalValue' ,center:'right'},
        { label: '总电费(元)', prop: 'totalAmount' ,center:'right'}
      ],
      totalCount: '',
    };
  },

  async mounted() {
    const {data:{list:array}} = await getloginlistapi()
    this.qiyelist = array
    const localbuildingId = localStorage.getItem('buildingId')
    const isBuildIdInArray = this.qiyelist.some(item => item.id == localbuildingId);
    this.$set(this.form, 'buildingId', isBuildIdInArray ? localbuildingId : this.qiyelist[0]?.id)
    this.getyonghuxialalist(this.form.buildingId)
    this.getdatalist()
  },

  methods: {
    tolook(row) {
      this.$refs.ListDialogref.todialog(row)
    },
    // 获取表格数据
    async getdatalist() {
      this.$refs.tabledata.loading=true
      const { data: { list,content,totalCount,totalPage} } = await getstatisticsapi({
        ...this.form, pageNo: this.pageNo-1, pageSize: 20,energyType: 'ELEC',
        startDate: this.value1[0], endDate: this.value1[1]
      })
      this.totalCount=totalCount
      this.totalobj = JSON.parse(content)
      this.tableData = list
      this.$refs.tabledata.loading = false
      if (totalCount && list.length == 0) {
        this.pageNo=1
        this.getdatalist()
      }
    },
    // 获取用户
    async getyonghuxialalist(val) {
      const {data:{list}} = await gettablelistapi({
          pageNo: 0, pageSize: 500,
          startDate: '', endDate: '', 
          state:'20',buildingId:val,customerType:''
      })
      this.yonghulist = list
    },
    // 企业下拉
    changeqiye(val) {
      localStorage.setItem('buildingId', val)
      this.getyonghuxialalist(val)
      this.form.customerId=''
    },
    // 导出
    daochu() {
      exportexcel('/mbm-microservice-biz/mbm/report/user/electric/statistics/exportExcel', {
        ...this.form, pageNo: this.pageNo, pageSize: 20,
        startDate: this.value1[0], endDate: this.value1[1]
      },'电量统计')
    },
     // 表格密度调节
    command(val) {
      this.iissize = val
    },
    chongzhi() {
      this.form= {customerId:''}
      const localbuildingId = localStorage.getItem('buildingId')
      const isBuildIdInArray = this.qiyelist.some(item => item.id == localbuildingId);
      this.$set(this.form, 'buildingId', isBuildIdInArray ? localbuildingId : this.qiyelist[0]?.id)
      this.getyonghuxialalist(this.form.buildingId)
      this.value1= [dayjs().format('YYYY-MM')+'-'+'01',dayjs().format('YYYY-MM-DD')]
      this.getdatalist()
    },
  },
};
</script>
<style scoped>
.EleStatistics{
  height: 100%;
  padding: 10px;
  .topbox{
    height: 80px;
    padding: 20px;
    background-color: #fff;
    margin-bottom: 10px;
  }
  .bodybox{
    height: calc(100% - 90px);
    padding: 20px;
    background-color: #fff;
    .table{
      height: 88%;
    }
    .fenye{
      margin-top: 10px;
      text-align: right;
    }
  }
}
</style>